<script setup>
import { ref, onMounted } from 'vue'

// 商品列表数据
const products = ref([])
const loading = ref(false)
const error = ref('')

// 获取商品列表
const fetchProducts = async () => {
  loading.value = true
  error.value = ''
  try {
    // 这里将来会调用后端API获取商品数据
    // 现在使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 500))
    products.value = [
      {
        id: 1,
        name: '测试商品1',
        price: 99.99,
        stock: 100,
        category: '电子产品',
        status: '上架'
      },
      {
        id: 2,
        name: '测试商品2',
        price: 199.99,
        stock: 50,
        category: '家居用品',
        status: '上架'
      },
      {
        id: 3,
        name: '测试商品3',
        price: 299.99,
        stock: 200,
        category: '服装鞋帽',
        status: '下架'
      }
    ]
  } catch (err) {
    error.value = '获取商品列表失败: ' + err.message
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchProducts()
})
</script>

<template>
  <div class="product-management">
    <div class="panel">
      <div class="panel-header">
        <h3>商品列表</h3>
        <button class="btn btn-primary">新增商品</button>
      </div>
      <div class="panel-body">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter">
          <input 
            type="text" 
            placeholder="搜索商品名称..." 
            class="form-input"
          >
          <select class="form-select">
            <option value="">全部分类</option>
            <option value="电子产品">电子产品</option>
            <option value="家居用品">家居用品</option>
            <option value="服装鞋帽">服装鞋帽</option>
          </select>
          <select class="form-select">
            <option value="">全部状态</option>
            <option value="上架">上架</option>
            <option value="下架">下架</option>
          </select>
          <button class="btn btn-search">搜索</button>
        </div>

        <!-- 商品表格 -->
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <table v-else class="data-table">
          <thead>
            <tr>
              <th>商品ID</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>库存</th>
              <th>分类</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="product in products" :key="product.id">
              <td>{{ product.id }}</td>
              <td>{{ product.name }}</td>
              <td>¥{{ product.price.toFixed(2) }}</td>
              <td>{{ product.stock }}</td>
              <td>{{ product.category }}</td>
              <td>
                <span :class="['status-tag', product.status.toLowerCase()]">
                  {{ product.status }}
                </span>
              </td>
              <td>
                <button class="btn btn-sm btn-edit">编辑</button>
                <button class="btn btn-sm btn-delete">删除</button>
                <button class="btn btn-sm btn-toggle">
                  {{ product.status === '上架' ? '下架' : '上架' }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 分页 -->
        <div class="pagination">
          <button class="btn btn-sm">上一页</button>
          <span class="page-info">第 1 页，共 1 页</span>
          <button class="btn btn-sm">下一页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-management {
  height: 100%;
}

.panel {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #1abc9c;
  color: white;
}

.btn-primary:hover {
  background-color: #16a085;
}

.btn-search {
  background-color: #3498db;
  color: white;
}

.btn-search:hover {
  background-color: #2980b9;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

.btn-edit {
  background-color: #3498db;
  color: white;
  margin-right: 5px;
}

.btn-edit:hover {
  background-color: #2980b9;
}

.btn-delete {
  background-color: #e74c3c;
  color: white;
  margin-right: 5px;
}

.btn-delete:hover {
  background-color: #c0392b;
}

.btn-toggle {
  background-color: #f39c12;
  color: white;
}

.btn-toggle:hover {
  background-color: #e67e22;
}

/* 表单元素样式 */
.form-input,
.form-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 10px;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #1abc9c;
}

/* 搜索筛选区域 */
.search-filter {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}

/* 加载和错误提示 */
.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.error {
  text-align: center;
  padding: 40px;
  color: #e74c3c;
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #606266;
}

.data-table tr:hover {
  background-color: #f5f7fa;
}

/* 状态标签 */
.status-tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.status-tag.上架 {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-tag.下架 {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.page-info {
  color: #606266;
  font-size: 14px;
}
</style>